{include file="jptweb/head" /}
<title>新媒体榜单</title>

</head>
<body>
<!--导航栏-->
{include file="jptweb/header" /}
<!--导航栏 end-->

<div class="user_header mediaer_header">
    <div class="main jpt_flex">
        <div class="portrait">
            <img class="" src="/static/jpt/jptweb/img/AD-touxiang2.png" alt="">
        </div>
        <div class="info jpt_flow_item">
            <p class="number">帐号：12345645</p>
            <p class="email">邮箱：12345645@qwe.com</p>
            <p class="role">角色：媒体主</p>
        </div>

    </div>

</div>

<div class="main user_w user_media row cl ">
    <aside class="left_nav mt-20 col-md-2">
        <ul>
            <li>
                <a href="{:url('demo/jptweb/mediauserinfo')}">&nbsp;&nbsp;
                    <img src="/static/jpt/jptweb/img/people.png" class="jpt_icon">
                    资料修改
                </a>
            </li>

            <li class="current">
                <a href="{:url('demo/jptweb/mediaeractivity')}">&nbsp;&nbsp;
                    <img src="/static/jpt/jptweb/img/active.png" class="jpt_icon">
                    活动管理
                </a>
            </li>



            <li>
                <a href="{:url('demo/jptweb/mediaeradv')}">&nbsp;&nbsp;
                    <img src="/static/jpt/jptweb/img/AD.png" class="jpt_icon">
                    广告管理
                </a>
            </li>
            <li >
                <a href="{:url('demo/jptweb/mediaersettlement')}">&nbsp;&nbsp;
                    <img src="/static/jpt/jptweb/img/money.png" class="jpt_icon">
                    结算管理
                </a>
            </li>
            <li >
                <a href="{:url('demo/jptweb/mediaeraccredit')}">&nbsp;&nbsp;
                    <img src="/static/jpt/jptweb/img/btn-weixin.png" class="jpt_icon">
                    公众号管理
                </a>
            </li>

        </ul>
    </aside>
    <div id="jpttemopt"  class="content HuiTab col-md-10 mt-20 ">
        <div class="jpt_nav-3">
            <template v-for="(item, index) in templates">
            <div class="nav_item current"  v-if="index == opttem.in"  >
                {{ item.title }}
            </div>
                <div class="nav_item"  v-else v-on:click="preopt(index)" >
                    {{ item.title }}
                </div>
            </template>
        </div>
        <div class="col-sm-6">
            <div class="panel jpt_panel-2 panel-default">
                <div class="panel-header"> <i class="Hui-iconfont jpt_titlt-icon_2 Hui-iconfont-luyin c_o"></i>模版简介</div>
                <div class="panel-body">
                    {{ opttem.tem.synopsis }}
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="panel jpt_panel-2 panel-default">
                <div class="panel-header"> <i class="Hui-iconfont jpt_titlt-icon_2 Hui-iconfont-luyin c_o"></i>功能介绍</div>
                <div class="panel-body"> {{ opttem.tem.fun }}</div>
            </div>
        </div>

        <div class="col-sm-12 mt-20">
            <div class="panel panel-default">
                <div class="panel-header"><i class="Hui-iconfont jpt_titlt-icon_2 Hui-iconfont-luyin c_o"></i>页面预览</div>
                <div class="panel-body">
                    <img :src="opttem.tem.preview" alt="">
                </div>
            </div>
        </div>
<div class="col-sm-12 text-c mt-20">
    <a href="" class="btn btn-primary radius  bth-jpt_5  "> 确认创建</a>
</div>


    </div>
</div>











{include file="jptweb/footer" /}
</div>
<script>
    var jptvm = new Vue({
        el: '#jpttemopt',
        data: {
            templates:[
                {
                    id:'1',
                    title:'基础模版一',
                    synopsis:'简介简介就就就飞过海规范化复合化股份就',
                    fun:'额头问题二万人热吻日首次而通过官方规范化规范化和腐干撒旦问题二恶二人已被hear吻额头 为二条请问广泛的个人个',
                    preview:''

                },
                {
                    id:'2',
                    title:'基础模版二',
                    synopsis:'简介简介就飞过海飞过海翻就就就就',
                    fun:'额头好烦好烦分发给是否豆腐干撒旦问题二恶二人已被hear吻额头 为二条请问广泛的个人个',
                    preview:''

                },
                {
                    id:'3',
                    title:'基础模版三',
                    synopsis:'简介简介就就就就就就就就',
                    fun:'额头官方恢复搞活而通过分散的方式是否豆腐干撒旦问题二恶二人已被hear吻额头 为二条请问广泛的个人个',
                    preview:''

                },
            ],
            opttem:{
                in:'1',
                tem:{
                    id:'1',
                    title:'基础模版一',
                    synopsis:'简介简介就就就就就就就就',
                    fun:'额头问题二万人热吻日首次而通过分散的方式是否豆腐干撒旦问题二恶二人已被hear吻额头 为二条请问广泛的个人个',
                    preview:''
                }

            },
        },
        methods: {
            greet: function (event) {
                // `this` 在方法里指当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            },
            preopt:function (e) {
                this.opttem.in=e;
                this.opttem.tem=this.templates[e];
            }
        }
    })


</script>
</body>
</html>